07. Fun with Vertical-Align

Fun with Vertical-Align

Question:

Fun with Vertical-Align

Now that we've covered horizontal alignment, it's time to look at vertical alignment.

The vertical-align property controls how elements vertically sit next to each other on the same line. With that said, you can also use vertical-align to vertically align content inside table-cells.

vertical-align example in table cells

Examples of vertical-align with table-cells.

The important thing here is vertical-align only works on inline elements (or inline-block) and table-cells.

By default, all inline elements start baseline with the baseline of its parent. You can think of the baseline as the imaginary line at the bottom of the "line".

inline elements vertically aligned on a line

Valid values for vertical-align include top, bottom, and middle, which work exactly like you'd expect, super and sub which can be used to superscript and subscript inline elements (hence their names), or you can use length values (e.g. px, %, em, rem, etc.) to specify a length above the baseline of its parent.

In this quiz, you'll work with the vertical-align property to align inline elements to match this mockup. Along the way, you might even recall on a thing or two from your Algebra, Chemistry, or Grammar classes.

How to Complete this Quiz

  1. Open this webpage with Chrome.
  2. Turn on the Udacity Feedback Chrome Extension.
  3. Use Developer Tools to make the page look like this to pass all the tests.
  4. Copy and paste the code that appears into the next page to finish!


Good luck!

Image Credit

Start Quiz:

Solution:

Here's each answer one-by-one:

Pythagorean Theorem

In order to fix the formula for the Pythagorean Theorem, you needed to add the following line of CSS to superscript the exponents.

.exponent {
  vertical-align: super;
}

This fixes the equation to read a² + b² = c². Next time you need to calculate the side of a right triangle, you'll be ready!

Chemical Equation for Ammonia

Ammonia is a chemical compound that is commonly used in household cleaners, and for this problem you needed to balance its chemical equation… well sort of, but not in the traditional sense.

household cleaners

Anyway, to fix this equation required adding this CSS to the class .subscript .

.subscript {
  vertical-align: sub;
}

Company Profile

Hey, who's that? That's just me playing slow-pitch softball 😎 !

james playing slow-pitch softball

To pass this test, you needed to find the <div> with the .profile-details class and add vertical-align: top . But aren't <div>s block elements? Yes, but this <div> was displayed as inline-block which allowed it to be vertically aligned next to the image.

Pangram with Images

If you're wondering what a pangram is, it's a sentence or verse that contains all the letters of the alphabet. A common pangram example is "The quick brown fox jumps over the lazy dog".

pangram example

To fix this example required adding vertical-align: middle to both the fox and dog images. This might have seemed confusing at first, but really you're adjusting where the image is aligned relative to the text.

Next Concept